<template>
    <div class="right bb fcbc">
        <div class="top flex">
            <div v-if="signed"
                class="btnbox">
                <hb-button :txt="Lang.btns[lang][0]"
                    class="btn"
                    @clk="e_page_(0)" />
                <hb-button :txt="Lang.btns[lang][1]"
                    class="btn"
                    @clk="e_page_(1)" />
                <hb-button :txt="Lang.btns[lang][2]"
                    class="btn"
                    @clk="e_page_(2)" />
				<hb-button :txt="Lang.btns[lang][3]"
                    class="btn"
                    @clk="e_page_(3)" />
            </div>
            <div v-else
                class="padr20">
                <hb-button2 :txt="Lang.sign[lang][0]"
                    @clk="e_sign_('up')" />
                <span v-text="Lang.sign[lang][1]">或</span>
                <hb-button2 :txt="Lang.sign[lang][2]"
                    @clk="e_sign_('in')" />
                <span v-text="Lang.sign[lang][3]">以发布广告</span>
            </div>
            <!-- <span class="padr10"
                v-text="Lang.sign[lang][4]">最高价</span>
            <span class="padr20">233</span>
            <span class="padr10"
                v-text="Lang.sign[lang][5]">最低价</span>
            <span>233</span> -->
        </div>
        <div class="table flex">
            <ul class="thead flex bussionHeader">
                <li v-for="(v, i) in labels"
                    :key="i"
                    v-text="v"
                    :class="'col'" :style="{width:100/labels.length+'%'}"></li>
            </ul>
            <c-list class="tbody"
                :list="apigetList" @action='action'/>
        </div>
    </div>
</template>

<script>
import Lang from './lang'
import Clist from './list'
import {bus} from '../../../../main.js'
export default {
	name: 'right',
	props: {
		apigetList: {
			default: 0,
		},
		labels: {
			default: [],
		},
	},
	data() {
		return {
			selectedPage: 1,
			Lang,
		}
	},
	computed: {
		signed() {
			return this.$store.state.user.signed
		},
		lang() {
			return this.$store.state.setting.lang
		},
		// labels() {
		// 	return this.Lang.labels[this.lang]
		// },
	},
	components: {
		'c-list': Clist,
	},
	created() {},
	methods: {
		action(){
			this.$emit('action')
		},
		e_page_(s) {
			if (s === 0) {
				this.$router.push('/c2c/create')
			} else {
				bus.$emit('selectedpage', s)
				this.$emit('selected', s)
			}
		},
		e_sign_(s) {
			this.$router.push('/sign' + s)
		},
	},
}
</script>

<style scoped>
.right {
	padding: 20px;
}
.top {
	width: 100%;
	height: 60px;
	align-items: center;
	color: var(--clr0);
}
.btnbox > .btn {
	margin-right: 20px;
	max-width: 80px;
	line-height: 30px;
	font-size: 14px;
	background-color: #2c6faa;
}
.padr20 {
	padding-right: 20px;
}
.padr10 {
	padding-right: 10px;
}
.table {
	flex-grow: 1;
	width: 100%;
	flex-direction: column;
}
.thead {
	width: 100%;
	height: 40px;
	padding: 10px 0;
	border-bottom: 1px solid rgb(66, 66, 66);
	align-items: center;
	color: var(--clr2);
}
.thead li{

}
.tbody {
	overflow: auto;
	flex-shrink: 1;
}
.col {
	text-align: center;
	flex-grow: 1;
}

</style>
